<template>
	<view class="awakener-container">
		<!-- 顶部标题栏 -->
		<view class="header" :style="{ paddingTop: safeDistance + 'px' }">
			<view class="header-content">
				<text class="header-title">全球觉醒者</text>
				<text class="header-subtitle">记录那些觉醒非凡能力的觉醒者</text>
			</view>
		</view>

		<!-- 觉醒者列表 -->
		<scroll-view class="awakener-scroll" scroll-y enable-back-to-top>
			<view class="awakener-list">
				<view 
					v-for="awakener in awakenerList" 
					:key="awakener.id" 
					class="awakener-card"
					@click="handleAwakenerClick(awakener)"
				>
					<!-- 人物头像和基本信息 -->
					<view class="card-header">
						<view class="avatar-wrapper">
							<image 
								class="avatar-image" 
								:src="awakener.avatar" 
								mode="aspectFill"
								@error="handleImageError"
							/>
							<view v-if="awakener.tags && awakener.tags.length > 0" class="level-badge">
								<text class="level-text">{{ awakener.tags[0] }}</text>
							</view>
						</view>
						<view class="awakener-info">
							<text class="awakener-name">{{ awakener.name }}</text>
							<text class="awakener-title">{{ awakener.title }}</text>
							<text class="awakener-period">{{ awakener.period }}</text>
						</view>
					</view>

					<!-- 觉醒级别 -->
					<view class="card-awakening">
						<text class="awakening-label">觉醒级别</text>
						<view class="awakening-stars">
							<text 
								v-for="i in 5" 
								:key="i" 
								class="awakening-star"
								:class="{ 'awakening-star-filled': i * 2 <= awakener.awakeningLevel }"
							>
								{{ i * 2 <= awakener.awakeningLevel ? '⭐' : '☆' }}
							</text>
							<text class="awakening-level-text">{{ Math.ceil(awakener.awakeningLevel / 2) }}/5</text>
						</view>
					</view>

					<!-- 简介 -->
					<text class="awakener-description">{{ awakener.description }}</text>

					<!-- 底部查看详情 -->
					<view class="card-footer">
						<text class="view-detail">查看详情 →</text>
					</view>
				</view>
			</view>

			<!-- 底部占位 -->
			<view class="bottom-placeholder"></view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue';
	import { getAwakenerList } from '@/data/awakener';
	import type { Awakener } from '@/types/awakener';

	// 觉醒者列表
	const awakenerList = ref<Awakener[]>(getAwakenerList());

	// 安全距离（顶部内边距 = 安全区域 + 基础间距）
	const safeDistance = computed(() => {
		const systemInfo = uni.getSystemInfoSync();
		const safeAreaTop = systemInfo.safeAreaInsets?.top || 0;
		return safeAreaTop + 20;
	});

	// 点击觉醒者卡片
	const handleAwakenerClick = (awakener: Awakener) => {
		uni.navigateTo({
			url: `/pages/awakener/detail?id=${awakener.id}`
		});
	};

	// 图片加载错误处理
	const handleImageError = (e: any) => {
		// 如果图片加载失败，可以使用默认头像
		console.log('图片加载失败:', e);
	};
</script>

<style lang="scss" scoped>
	.awakener-container {
		height: 100vh;
		background: linear-gradient(180deg, #f5f7fa 0%, #e9ecef 100%);
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	/**
	 * 顶部标题栏
	 */
	.header {
		flex-shrink: 0;
		width: 100%;
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-bottom: 32rpx;
		background: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;
		box-sizing: border-box;
	}

	.header-content {
		flex: 1;
	}

	.header-title {
		font-size: 48rpx;
		font-weight: 900;
		color: #1a202c;
		display: block;
		margin-bottom: 8rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	.header-subtitle {
		font-size: 26rpx;
		color: #64748b;
		font-weight: 500;
	}

	/**
	 * 觉醒者列表滚动区域
	 */
	.awakener-scroll {
		flex: 1;
		padding: 24rpx 24rpx 0;
		width: 100%;
		box-sizing: border-box;
		overflow-y: auto;
		height: 0;
	}

	.awakener-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	/**
	 * 觉醒者卡片
	 */
	.awakener-card {
		background: white;
		border-radius: 24rpx;
		padding: 32rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

		&:active {
			transform: scale(0.98);
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
		}
	}

	/**
	 * 卡片头部
	 */
	.card-header {
		display: flex;
		align-items: center;
		gap: 24rpx;
		margin-bottom: 24rpx;
		padding-bottom: 24rpx;
		border-bottom: 2rpx solid #f1f5f9;
	}

	.avatar-wrapper {
		width: 120rpx;
		height: 120rpx;
		position: relative;
		flex-shrink: 0;
	}

	.avatar-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border: 4rpx solid rgba(102, 126, 234, 0.2);
		box-shadow: 0 8rpx 20rpx rgba(102, 126, 234, 0.3);
	}

	.level-badge {
		position: absolute;
		top: -8rpx;
		right: -8rpx;
		padding: 6rpx 12rpx;
		background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
		border-radius: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(245, 158, 11, 0.4);
		border: 2rpx solid white;
	}

	.level-text {
		font-size: 20rpx;
		color: white;
		font-weight: 700;
	}

	.awakener-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.awakener-name {
		font-size: 36rpx;
		font-weight: 800;
		color: #1a202c;
		line-height: 1.2;
	}

	.awakener-title {
		font-size: 26rpx;
		color: #667eea;
		font-weight: 600;
	}

	.awakener-period {
		font-size: 22rpx;
		color: #94a3b8;
		font-weight: 500;
	}

	/**
	 * 觉醒级别
	 */
	.card-awakening {
		margin-bottom: 20rpx;
		padding: 20rpx;
		background: linear-gradient(135deg, #f8f9fa 0%, #f1f5f9 100%);
		border-radius: 16rpx;
	}

	.awakening-label {
		font-size: 24rpx;
		font-weight: 700;
		color: #1a202c;
		display: block;
		margin-bottom: 12rpx;
	}

	.awakening-stars {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.awakening-star {
		font-size: 32rpx;
		line-height: 1;
		transition: all 0.3s ease;
	}

	.awakening-star-filled {
		filter: drop-shadow(0 2rpx 6rpx rgba(255, 215, 0, 0.6));
		transform: scale(1.1);
	}

	.awakening-level-text {
		font-size: 28rpx;
		font-weight: 700;
		color: #667eea;
		margin-left: 16rpx;
	}

	/**
	 * 简介
	 */
	.awakener-description {
		font-size: 26rpx;
		color: #475569;
		line-height: 1.6;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 20rpx;
	}

	/**
	 * 卡片底部
	 */
	.card-footer {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 16rpx;
		border-top: 2rpx solid #f1f5f9;
	}

	.view-detail {
		font-size: 26rpx;
		color: #667eea;
		font-weight: 600;
	}

	/**
	 * 底部占位
	 */
	.bottom-placeholder {
		height: 120rpx;
	}
</style>

